<template>
	<view class="content">
		<view class="book-con">
			<view class="flex-row">
				<view>就诊人姓名：</view>
				<view class="book-input">
					<u-input placeholder="请输入姓名" border="none" inputAlign="right" v-model="name"></u-input>
				</view>
			</view>
			<u-line color="#E7E7E7"></u-line>
			<!-- <view class="flex-row" @click="showSex = true">
				<view>就诊人性别：</view>
				<view class="book-input" style="color: #303133;font-size: 15px;">
					<view v-if="sex" style="text-align: right;">{{sex}}</view>
					<view v-else style="color: rgb(192, 196, 204);text-align: right;">请选择性别</view>
				</view>
			</view> -->
			<u-line color="#E7E7E7"></u-line>
			<view class="flex-row">
				<view>证件号码：</view>
				<view class="book-input">
					<u-input type="idcard" placeholder="请输入证件号码" border="none" inputAlign="right"
						v-model="card"></u-input>
				</view>
			</view>
			<u-line color="#E7E7E7"></u-line>
			<view class="flex-row">
				<view>手机号码：</view>
				<view class="book-input">
					<u-input type="number" placeholder="请输入手机号码" border="none" inputAlign="right"
						v-model="phone"></u-input>
				</view>
			</view>
			<u-line color="#E7E7E7"></u-line>
			<!-- <view class="flex-row" @click="showTime = true">
				<view>出生日期：</view>
				<view class="book-input" style="color: #303133;font-size: 15px;">
					<view v-if="birth" style="text-align: right;">{{birth}}</view>
					<view v-else style="color: rgb(192, 196, 204);text-align: right;">请选择日期</view>
				</view>
			</view> -->
			<u-line color="#E7E7E7"></u-line>
			<view class="flex-row" @click="visible = true">
				<view>所属地区：</view>
				<view class="book-input" style="color: #303133;font-size: 15px;">
					<view v-if="area" style="text-align: right;">{{area}}</view>
					<view v-else style="color: rgb(192, 196, 204);text-align: right;">请选择居住地区</view>
				</view>
			</view>
			<u-line color="#E7E7E7"></u-line>
			<view class="flex-row">
				<view>详细地址：</view>
				<view class="book-input">
					<u-input placeholder="请输入居住详细地址" border="none" inputAlign="right" v-model="address"></u-input>
				</view>
			</view>
		</view>
		<view class="book-title">
			温馨提示：一键绑卡仅限制于门诊患者
		</view>
		<view class="book-but">
			<u-button type="primary" text="一键绑卡" @click="submitForm"></u-button>

		</view>
		<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" @close="showSex = false" @select="sexSelect">
		</u-action-sheet>
		<u-datetime-picker :show="showTime" v-model="birthTime" mode="date" :minDate="0" @cancel="showTime=false"
			@confirm="confirm"></u-datetime-picker>
		<cityPicker :column="column" :default-value="defaultValue" :mask-close-able="true" @confirm="selectArea"
			@cancel="visible=false" :visible="visible" />
	</view>
</template>

<script>
	import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
	import {
		adduserApi
	} from "@/api/user"
	export default {
		data() {
			return {
				name: '',
				sex: '',
				card: '',
				phone: '',
				birth: '',
				area: '',
				address: '',
				birthTime: Number(new Date()),
				showSex: false,
				showTime: false,
				visible: false,
				// defaultValue: '420103',
				defaultValue: ['河南省', '商丘市', '梁园区'],
				column: 3,
				actions: [{
						name: '男',
					},
					{
						name: '女',
					},

				],
			}
		},
		components: {
			cityPicker
		},
		methods: {
			sexSelect(e) {
				console.log(e);
				this.sex = e.name
			},
			confirm(e) {
				this.birth = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
				this.showTime = false
			},
			selectArea(val) {
				console.log(val)
				this.area = `${val.provinceName}/${val.cityName}/${val.areaName}`
				this.submitArea = val.name
				this.visible = false
			},
			async submitForm() {
				// console.log(this.card.toUpperCase());
				// return
				uni.showLoading()
				try {
					let userInfo = uni.getStorageSync('userInfo')
					const res = await adduserApi({
						userCard: this.card.toUpperCase(),
						patientName: this.name,
						patientTel: this.phone,
						address: this.submitArea + this.address,
						userId: userInfo.id,
						userCardType: 2,
						patientType: 1
					})
					uni.hideLoading()
					uni.navigateTo({
						url: '/pages/result/result'
					})
				} catch (e) {
					uni.hideLoading()
				}

			},
		}
	}
</script>

<style scoped>
	.content {
		width: 100vw;
		min-height: 100%;
		box-sizing: border-box;
		background: #F8F8F8;
		color: #666666;
		font-size: 27rpx;
		/* background: red; */
	}

	.book-con {
		background-color: #FFFFFF;
		padding: 0 31rpx;
		box-sizing: border-box;
	}

	.flex-row {
		display: flex;
		align-items: center;
		padding: 21rpx 0;
	}

	.book-input {
		margin-left: auto;
		width: 420rpx;

	}

	.book-title {
		color: #999999;
		font-size: 23rpx;
		margin-left: 31rpx;
		margin-top: 23rpx;
	}

	.book-but {
		width: 688rpx;
		height: 85rpx;
		margin: 0 auto;
		margin-top: 92rpx;
	}
</style>